<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>淘宝</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .app{
            width: 300px;
            margin: auto;
        }
        .app .nav >li{
            list-style: none;
            display: inline-block;
            position: relative;
            padding: 5px;
            cursor: pointer;
        }
        .app .nav >.active::after{
            content: "";
            border-bottom: 1px solid orangered;
            position: absolute;
            width: 100%;
            left: 0;
            bottom: -1px;
        }
        .app .main>div{
            display: none;
        }
        .app .main >.active{
            display: block;
        }
        a{
            text-decoration: none;
            font-size: 12px;
        }
        .c{
            color: orangered;
        }
        .h{
            color: #000;
        }
        .h:hover{
            color: orangered;
        }

    </style>
</head>
<body>
<div class="app">
    <ul class="nav">
        <li class="active">公告</li>
        <li>规则</li>
        <li>论坛</li>
        <li>安全</li>
        <li>工艺</li>
    </ul>
    <div class="main">
        <div class="active"><div class="">
            <div class=""> <a href="" class="c">天猫618狂欢冲刺 聚划算全面爆发</a></div>
            <div class="">
            <a href="" class="h ">天猫 618 吃货大爆发 </a>
                <a href="" class="h">新西兰高端奶成交大涨</a></div>
        </div></div>
        <div>
            <div class=""><a href="" class="h">新增《淘宝网汽配行业管理规范》</a>
            <a href="" class="h ">公示通知《淘宝网区域零售服务</a></div>
            <div class=""><a href="" class="h ">变更公示通知《淘宝网票务行业管理</a>
            <a href="" class="h">变更公示通知《淘宝网数字娱乐市场</a></div></div>
        <div>
            <div class=""><a href="" class="c">淘宝1212活动招商</a>
                <a href="" class="h ">中差评功能升级</a></div>
            <div class=""><a href="" class="h ">陌生人拼团上线</a>
                <a href="" class="h">运营神器年中大促</a></div>
        </div>
        <div> <div class=""><a href="" class="c">魔豆妈妈公益项目</a>
            <a href="" class="h ">让母爱永不打烊！！</a></div>
            <div class=""><a href="" class="h ">卖家注意：风险通报！</a>
                <a href="" class="h">售假获刑又起诉！</a></div></div>
        <div><div class=""><a href="" class="c">淘宝公益平台正式更名</a>
            <a href="" class="c "> 益起来商家招募即将截止</a></div>
            <div class=""><a href="" class="h ">卖家如何设置公益宝贝</a>
                <a href="" class="h">公益机构开店全攻略</a></div></div></div>

    </div>
</div>



<script src="js/js.js"></script>
</body>
</html>